<template>
  <div>
    <el-container
      v-show="loading == false"
      v-loading="loading"
      :style="'background-image: url(' + store.backgroundUrl + ');' + 'background-size:cover; background-repeat:no-repeat; background-attachment:fixed;'"
    >
      <!-- <el-background-image :src="store.backgroundUrl" fit="fill"></el-background-image> -->
      <el-header style="font-size: 12px;">
        <el-row>
          <el-col :span="8">
            <div
              style="font-size: 20px; color: #ffffff; font-weight: bold; margin: auto;"
            >{{store.storeName}}</div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content">
              <!-- <el-button>刷新</el-button> -->
            </div>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <div v-show="user.login == true">
              <el-button
                icon="el-icon-shopping-cart-2"
                style="color: #ffffff; background-color: rgba(255,255,255,0.2); border: none; margin-right: 20px;"
                circle
                plain
                @click="toShoppingcart"
              ></el-button>

              <!-- <i class="el-icon-shopping-cart-2" style="margin: 10px;"></i> -->
              <span style="font-size: 16px; color: #ffffff; margin-right: 10px;">{{user.userName}}</span>
              <el-dropdown style="margin-right: 10px;">
                <i class="el-icon-setting" style="margin-left: 15px; color: #ffffff"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="toUsercenter">用户中心</el-dropdown-item>
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <div v-show="user.login == false">
              <el-button
                style="color: #ffffff; background-color: rgba(255,255,255,0.2); border: none; margin-right: 20px;"
                round
                plain
                @click="toLogin()"
              >登录</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div>
          <div
            style="border: 50px solid #ffffff; width: 1000px; margin: auto; background-color: #ffffff;"
          >
            <StoreHeader ref="storeHeader" @searchProduce="searchProduce" />
            <div style="height: 50px;" />

            <div style="border: 2px solid #cccccc; background-color: hsl(41, 70%, 93%);">
              <h1 style="font-size: 20px;">公告</h1>
              <p>{{store.storeAnno}}</p>
            </div>
            <div style="height: 50px;" />

            <StoreCategory ref="storeCategory" @changeCategory="changeCategory" />
            <div style="height: 50px;" />
            <StoreProduces ref="storeProduces" />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ProduceSample from "@/components/Store/ProduceSample";
import StoreHeader from "@/components/Store/StoreHeader";
import StoreCategory from "@/components/Store/StoreCategory";
import StoreProduces from "@/components/Store/StoreProduces";

export default {
  name: "Produce",
  data() {
    return {
      loading: true,
      store: {},
      user: {
        login: false,
      },
      produces: [],
    };
  },
  components: {
    ProduceSample,
    StoreHeader,
    StoreCategory,
    StoreProduces,
  },
  methods: {
    init(storeId) {
      // console.log("Store init. " + storeId);
      var url;

      // 检查登录
      url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          //   console.log(response);

          if (response.data.status == "ok") {
            this.user.userId = response.data.userId;
            this.user.userName = response.data.userName;
            this.user.login = true;
          } else {
          }
        },
        (response) => {}
      );

      // 店铺基本信息
      url = process.env.URL_HEAD + "/store/store/info/" + storeId;
//url = process.env.URL_HEAD + "/store/store/info/" + storeId;
      this.$http.get(url).then(
        (response) => {
          //   console.log(response);

          if (response.data.store != null) {
            // console.log(response.data.store);
            if (response.data.store.storeStatus == 0) {
              this.$emit("storeNoFound");
              console.log("unopen store");
              return;
            }

            this.$refs.storeHeader.init(response.data.store);
            this.store = response.data.store;

            document.title = this.store.storeName;
            console.log("initStore ok");
          } else {
            this.$emit("storeNoFound");
            console.log("find nothing");
          }

          this.loading = false;
        },
        (response) => {
          this.$emit("storeNoFound");
          console.log("initStore fail");

          this.loading = false;
        }
      );

      // 分类信息
      // url = process.env.URL_HEAD + "/search/search/store/category/accurate";
      url = process.env.URL_HEAD + "/store/category/list/" + storeId;

      this.$http.get(url, { params: { key: "storeId", value: storeId } }).then(
        (response) => {
          // console.log(response);
          // var category = response.data.accurate.list;
          var category = response.data.page.list;

          // console.log(category);

          if (category != null) {
            this.$refs.storeCategory.init(category);
          }
        },
        (response) => {}
      );

      //店铺产品
      url = process.env.URL_HEAD + "/search/search/produce/produce/accurate";

      this.$http.get(url, { params: { key: "storeId", value: storeId } }).then(
        (response) => {
          // console.log(response);
          var produces = response.data.accurate.list;

          // console.log(produces);

          if (produces != null) {
            // console.log(produces);
            this.produces = [];

            for (var i = 0; i < produces.length; i++) {
              if (produces[i].produceStatus == "1") {
                this.produces.push(produces[i]);
              }
            }

            this.$refs.storeProduces.init(this.produces);
          }
        },
        (response) => {}
      );
    },
    changeCategory(categoryId) {
      if (categoryId != 0) {
        var produces = [];

        for (var i = 0; i < this.produces.length; i++) {
          if (this.produces[i].categoryId == categoryId) {
            produces.push(this.produces[i]);
          }
        }

        this.$refs.storeProduces.init(produces);
      } else {
        this.$refs.storeProduces.init(this.produces);
      }
    },
    searchProduce(searchInput) {
      console.log(searchInput);

      var produces = [];
      for (var i = 0; i < this.produces.length; i++) {
        if (
          this.produces[i].produceName.search(searchInput) != -1 ||
          this.produces[i].produceDesc.search(searchInput) != -1
        ) {
          produces.push(this.produces[i]);
        }
      }

      this.$refs.storeProduces.init(produces);
    },
    toLogin() {
      var newHref =
        process.env.LOGIN_URL + "?originUrl=" + window.location.href;
      window.location.href = newHref;
    },
    logout() {
      var url = process.env.URL_HEAD + "/touser/user/page/logout";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            // this.$message.success("退出成功！");
            location.reload();
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
    },
    toUsercenter() {
      window.open(process.env.USERCENTER_URL);
      // window.location.href = process.env.USERCENTER_URL;
    },
    toShoppingcart() {
      window.location.href = process.env.SHOPPINGCART_URL;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  background-color: #69a57b;
  color: #333;
  line-height: 60px;
}

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
}

.main-div {
  left: 200px;
}

.grid-content {
  min-height: 36px;
}
</style>
